<template>
  <view class="content">
    <uni-search-bar style="flex: 1" radius="100" :cancelButton="false" @confirm="search" :focus="false" v-model="value"
                    @input="change" :placeholder="placeholder"
                    @clear="clear">
    </uni-search-bar>

    <view @click="rightClick()">
      <text v-if="showScreen" style="color: white;margin-right: 20rpx;" @click="screenClick">筛选</text>
      <slot name="right"></slot>
    </view>

  </view>
</template>

<script>
import UniSearchBar from "@/uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue";

export default {
  name: "search",
  components: {UniSearchBar},
  props: {
    placeholder: {
      type: String,
      default: '请输入搜索关键字'
    },
    showScreen: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      value: '',
      timeout: null,
    };
  },
  methods: {
    change(value) {
      // 搜索框内容变化时，会触发此事件，value值为输入框的内容
      // console.log("change+++++"+value);
      if (this.timeout) {
        clearTimeout(this.timeout);
      }

      this.timeout = setTimeout(() => {
        this.search(value);
      }, 1000);


    },
    custom(value) {
      // console.log("custom+++++"+value);
      this.$u.toast('输入值为：' + value)
    },
    search(value) {

      if(typeof value === 'string'){
        this.$emit('input', value);
      }else{
        this.$emit('input', value.value);
      }




      // this.$refs.uToast.show({
      // 	title: '搜索内容为：' + value,
      // 	type: 'success'
      // })
    },
    clear() {
      // console.log(this.value);
    },

    rightClick() {
      this.$emit('rightclick', true)
    },

    screenClick() {
      this.$emit('goScreen', true)
    }
  }
}
</script>

<style lang="scss">
.content {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  width: 100%;
  height: 100rpx;
  background-color: white;
  align-items: center;
  border-top: #f5f5f5 1px solid;
  z-index: 2;
}

// u-search {
// 	flex-grow: 1;
// 	margin: 0 25rpx;
// }
</style>
